<template>
  <div>
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <span style="color: #323233" @click="loginByPhone = !loginByPhone">{{
          loginByPhone == true ? "密码登录" : "手机验证码登录"
        }}</span>
      </template>
      <template #left>
        <van-icon name="arrow-left" size="18" color="#323233" />
        <span style="color: #323233">返回</span>
      </template>
    </van-nav-bar>
    <van-form @submit="onSubmit(1)" v-if="loginByPhone">
      <van-field
        v-model="phoneNum"
        type="phoneNum"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号码"
        :rules="[{ required: true, message: '请输入手机号码' }]"
      />
      <van-field
        v-model="sms"
        center
        clearable
        name="短信验证码"
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[{ required: true, message: '短信验证码不能为空' }]"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            ref="smsButton"
            @click="smsSend"
            >发送验证码</van-button
          >
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >验证登录</van-button
        >
      </div>
    </van-form>
    <van-form @submit="onSubmit(2)" v-if="!loginByPhone">
      <van-field
        v-model="phoneNum"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号码"
        :rules="[{ required: true, message: '手机号码不能为空' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '密码不能为空' }]"
      />
      <van-divider />
      <van-row type="flex" justify="space-around">
        <van-col span="10" >
          <van-button round block type="danger"  
            >注册</van-button
          >
        </van-col>
        <van-col span="10" offset="2" >
          <van-button round block type="info" native-type="submit" 
            >登录</van-button
          >
        </van-col>
      </van-row>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      loginByPhone: true,
      sms: "",
      phoneNum: "",
      password: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/shop");
    },
    onClickRight() {
      [this.sms, this.password, this.phoneNum] = ["", "", ""];
    },
    // 发送验证码
    smsSend() {
      if (this.phoneNum == "" || this.phoneNum == null) {
        this.$toast.fail("手机号码不能为空");
        return;
      } else if (this.sms == null || this.sms == "") {
        this.$toast.fail("短信验证码不能为空");
        return;
      }

      this.$toast.success("发送成功");
    },
    onSubmit(value) {
      if (value == 1) {
        console.log("短信登录");
        this.$toast.success("短信登录成功");
      } else if (value == 2) {
        console.log("密码登录");
        this.$toast.success("密码登录成功");
      }
    },
  },
};
</script>

<style lang="css" scoped></style>
